<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 关于我们 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-5 justify-center items-center p-4">
      <view class="!size-[4.5rem] mt-[4.625rem] rounded-[1.0625rem] overflow-hidden">
        <image src="/static/dddr71.png" mode="aspectFill" class="!size-full" />
      </view>
      <view class="text-[.875rem] text-[#161A24]"> 版本号：{{ vk.getConfig().versionName }} </view>
      <view class="rounded-[.5rem] bg-white w-full mt-3">
        <view class="flex justify-between px-5 py-3" @click="vk.navigateTo('/pages/login/agreement?type=1')">
          <view class="text-[.875rem] text-[#161A24]">用户协议 </view>
          <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
        </view>
        <view class="flex justify-between px-5 py-3" @click="vk.navigateTo('/pages/login/agreement?type=2')">
          <view class="text-[.875rem] text-[#161A24]">隐私政策 </view>
          <view> <u-icon name="arrow-right" size="26" color="#919499"></u-icon> </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view
        class="flex flex-col justify-center items-center"
        style="padding-bottom: calc(env(safe-area-inset-bottom) / 2)"
      >
        <view class="text-[.75rem] text-[#161A24]">{{ vk.getVuex('$app.initData.site.recordNumber') || '' }}</view>
        <view class="text-[.625rem] text-[#8E9299]">{{ vk.getVuex('$app.initData.site.copyright') || '' }}</view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false // 是否自动加载
      }
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
